<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
<!--1.第一种写法-->
<script id="cpn1" type="text/x-template">
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</script>
<!--2.第二种写法(常用写法)-->
<template id="cpn">
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn', {
    template: '#cpn',
    data(){//组件中的数据需要是一个函数 目的：避免出现组件之间相互关联，组件之间相互影响

    },
    methods:{//组件相当于一个小的vue，vue比成一个空间，那么组件就是一个和基本什么都要的房子

    }
  })

  const vm = new Vue({
    el: '#app',
    data: {}
  })
</script>

</body>
</html>